<form role="form" action="" class="frm-operate" method="post">
    <div class="card shadow-none">
        <div class="card-body">
            <div class="form-group row">
                <label for="frm-parent_id" class="col-sm-2 row-form-label">{:lang("Parent role")}</label>
                <div class="col-sm-8">
                    {:build_select('row[parent_id]',$option,'',['id'=>'frm-parent_id','class'=>'form-control'])}
                </div>
            </div>
            <div class="form-group row">
                <label for="frm-name" class="col-sm-2 row-form-label">{:lang("Name")}</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="frm-name" name="row[name]" placeholder="名称" data-rule="required">
                </div>
            </div>
            <div class="form-group row">
                <label for="frm-rules" class="col-sm-2 row-form-label">{:lang("Competence")}</label>
                <div class="col-sm-8">
                    <label class="control-label"><input type="checkbox" onclick="checkAll(this,1)" class="J_check"> {:lang("Select all")}</label>
                    <label class="control-label"><input type="checkbox" onclick="openAll(this,1)" class="J_check" checked> {:lang("Expand All")}</label>
                    <div class="frm-rules"></div>
                </div>
            </div>
            <div class="form-group row">
                <label for="frm-remark" class="col-sm-2 row-form-label">{:lang("Remark")}</label>
                <div class="col-sm-8">
                    <textarea class="form-control" id="frm-remark" name="row[remark]" rows="3" placeholder="{:lang("Remark")}"></textarea>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 row-form-label">{:lang("Status")}</label>
                <div class="col-sm-8">
                    {:build_radios('row[status]',['normal'=>lang("Normal"),'hidden'=>lang("Hidden")])}
                </div>
            </div>
        </div>
        <div class="card-footer">
            <div class="row justify-content-around">
                <div class="col-sm-8">
                    <button type="submit" class="btn btn-primary btn-submit">{:lang('Submit')}</button>
                    <button type="reset" class="btn btn-default">{:lang('Reset')}</button>
                </div>
            </div>
        </div>
    </div>
</form>

{block:script}
<script>
    require(['admin','jstree','form'], function (undefined,undefined,Form) {
        Form.api.init({
            before: function (data) {
                var ref = $('.frm-rules').jstree(true);//获得整个树
                var sel = ref.get_selected(); //获得所有选中节点，返回值为数组
                sel.push.apply(sel,ref.get_undetermined(false)); //返回半选中节点ID并合并数组，true 则返回对象的形式.
                if (sel.length===0) {
                    //Layer.msg("{:lang('Please select authority node')}");
                    //return false;
                    data.push({name:'row[rules]',value:''});
                } else {
                    data.push({name:'row[rules]',value:sel.join(',')});
                }


                return data;
            }
        });
        $(function () {
            getGroupRule();
        })
        $('#frm-parent_id').change(function (e) {
            getGroupRule();
        });
    })

    function getGroupRule() {
        var pid = $('#frm-parent_id').val();
        Util.ajax({
            url:'{:url("/user.Group/groupRule")}?id='+pid
        },'',function (data) {
            $('.frm-rules').jstree("destroy");
            $('.frm-rules').jstree({ "plugins":["checkbox"],'core':{'data':data.auth}});
        });
    }

    //全选
    function checkAll(obj, idx) {
        var ch = $(obj).prop('checked');
        if (ch) {
            //选中
            $(idx==1?'.frm-rules':'.category-rules').jstree('select_all');
        } else {
            $(idx==1?'.frm-rules':'.category-rules').jstree('uncheck_all');
        }
    }
    function openAll(obj, idx) {
        $(idx==1?'.frm-rules':'.category-rules').jstree($(obj).prop("checked") ? "open_all" : "close_all")
    }
</script>
{/block:script}